<template>
	<view>
		<view v-if="userList.length>0">
			<van-index-bar :index-list="indexList">
				<block v-for="(item,index) in userList" :key="index">
					<van-index-anchor :index="item.key" />
					<van-cell center :title="item1.name" v-for="(item1,index1) in item.child" :key="index"
						@click="changeUser(item1)">
						<template #icon>

							<van-image round width="70rpx" height="70rpx" :src="item1.avatar" style="margin-right: 20rpx;"/>
						</template>
					</van-cell>
				</block>

			</van-index-bar>
		</view>

	</view>
</template>

<script setup>
	import {
		userBook
	} from "@/api";

	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	onLoad(() => {
		getList()
	})
	const userList = ref([])
	const indexList = ref([])
	const getList = () => {
		userBook().then(res => {
			console.log(res.data)
			indexList.value = Object.keys(res.data);
			console.log(indexList.value)
			let arr = []
			Object.entries(res.data).forEach(([key, value]) => {
				let obj = {}
				obj.key = key
				obj.child = value
				arr.push(obj)
			});
			userList.value = arr
			console.log(userList.value)
		})
	}
	const changeUser = (user) => {
		uni.$emit('getChangeUser', user)
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>

</style>